<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!--指令修饰符:
    通过"."指明一些指令后缀，不同的后缀封装了不同的处理操作————简化代码开发
    1.按键修饰符
      @keyup.enter——监听键盘回车
    2.v-model修饰符
      （1）v-model.trim——去除首尾空格
      （2）v-model.number——转数字（如果不输入数字那前端就不处理）
    3.事件修饰符
      @事件修饰符.stop——阻止冒泡
      @事件名.prevent——阻止默认行为
-->
  <div id="app">
    <h3>@keyup.enter  →  监听键盘回车事件</h3>
    <input @keydown.enter="fn" v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        fn () {
          // if (e.key === 'Enter') {
          //   console.log('键盘回车的时候触发', this.username)
          // }

          console.log('键盘回车的时候触发', this.username)
        }
      }
    })
  </script>
</body>
</html>